<template>
  <div class="page home">
    <div class="page-container">
      <el-row :gutter="15" type="flex" style="width: 100%;height: 100%;margin: 0">
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="警务站概况">
              <StationOverview @openPetitionDialog="openPetitionDialog" />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="广厦第一警务区资料">
              <AgeSexStatistics />
            </Card>
          </el-row>
        </el-col>
        <el-col :span="10" class="col">
          <div class="tab-block">
            <HomeTab />
          </div>
          <el-row class="row" :gutter="10" type="flex" style="width: 100%;margin: 0">
            <el-col :span="24" class="col">
              <Card title="无人机工作情况">
                <DroneSituation />
              </Card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7" class="col">
          <el-row class="row">
            <Card title="警力排班情况">
              <PoliceScheduling />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="报警类型占比">
              <AlarmType />
            </Card>
          </el-row>
          <el-row class="row">
            <Card title="24小时接警统计">
              <AlarmStatistics />
            </Card>
          </el-row>
        </el-col>
        <div class="map">
          <HomeMap></HomeMap>
        </div>
      </el-row>
    </div>
    <Dialog v-if="petitionDialog.show" :info="petitionDialog">
      <Petition :type="petitionDialog.type" />
    </Dialog>
  </div>
</template>
<script>
import Card from '@/components/Card.vue'
import HomeMap from "@/components/Home/HomeMap.vue";
import StationOverview from "@/components/Home/StationOverview.vue";
import AgeSexStatistics from "@/components/Home/AgeSexStatistics.vue";
import PoliceScheduling from "@/components/Home/PoliceScheduling.vue";
import DroneSituation from "@/components/Home/DroneSituation.vue";
import AlarmType from "@/components/Home/AlarmType.vue";
import AlarmStatistics from "@/components/Home/AlarmStatistics.vue";
import HomeTab from "@/components/Home/HomeTab.vue";
import Dialog from "@/components/Dialog.vue";
import Petition from "@/components/Home/Detail/Petition.vue";

export default {
  components: {
    Petition,
    Dialog,
    HomeTab,
    AlarmStatistics,
    AlarmType,
    DroneSituation, 
    PoliceScheduling, 
    AgeSexStatistics, 
    StationOverview, 
    HomeMap, 
    Card 
  },
  data(){
    return{
      petitionDialog: {
        show:false,
        type:null,
        width:'1200px',
        title:'',
      },
    }
  },
  methods:{
    openPetitionDialog(params){
      this.petitionDialog.show=true;
      this.petitionDialog.type=params.type
      this.petitionDialog.title=params.title
    }
  }
}
</script>
<style lang="scss" scoped>
.page.home{
  .page-container{
    width: 100%;
    height: 100%;
    .map{
      width: 100vw;
      height:100vh;
      z-index: 1;
      position: fixed;
      left: 0;
      top: 0;
    }
    .col{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      .row{
        width: 100%;
        height: calc(100%/3 - 10px);
        z-index: 10;
        position: relative;
      }
    }
    .col:nth-child(2){
      justify-content: flex-end;
    }
    .col:nth-child(1){
      .row:nth-child(1){
        height: calc(100%/3*2 - 10px);
      }
    }
    .tab-block{
      position: absolute;
      width: 100%;
      height: 100px;
      left: 0;
      top: 60px;
      z-index: 12;
    }
  }
}
</style>
